<template>
  <div :class="['audit-flow', { 'school-scoped': userType != 1 }]">
    <div class="flow-left">
      <SchoolPermission @e-emit="schoolSelect" />
    </div>
    <div class="flow-right">
      <router-view v-if="flag" />
      <div v-else>
        <Search />
        <List v-if="scope" :scope="scope" />
        <Add v-if="scope" :scope="scope" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Bus from '@/utils/bus.js'
export default {
  components: {
    SchoolPermission: () => import('@/components/schoolPermission/index.vue'),
    List: () => import('./List.vue'),
    Search: () => import('./Search.vue'),
    Add: () => import('./Add.vue'),
  },
  data() {
    return {
      flag: false,
      scope: '',
    }
  },
  computed: mapGetters(['userId', 'userType']),
  watch: {
    $route(v) {
      this.flag = v.meta.flag
    },
  },
  mounted() {
    this.flag = this.$route.meta.flag
  },
  methods: {
    schoolSelect(v) {
      let rou = this.$route.name
      if (rou != 'audit-flow') {
        this.$router.go(-1)
      }
      this.scope = v.id
      Bus.$emit('refreshFlowList', { scope: v.id })
    },
  },
}
</script>
<style scoped lang="scss">
.audit-flow {
  position: relative;
  .flow-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    min-height: 500px;
  }
  .flow-right {
    position: absolute;
    left: 250px;
    right: 0;
    top: 0;
    min-height: 500px;
  }
}
.school-scoped {
  .flow-left {
    display: none;
  }
  .flow-right {
    left: 0;
  }
}
</style>